<template>
  <div>
    <nav class="nav"><span class="back" @click="$router - back()"></span></nav>
    <div class="top">
      <span>
        <van-icon name="arrow-left" />
      </span>
      <h3>城市列表</h3>
    </div>
    <div class="list">
      <van-index-bar>
        <div>
          <span class="currentcity"><van-index-anchor index="当前城市"/></span>
          <van-cell title="上海" />
           <span><van-index-anchor index="热门城市"/></span>
          <van-cell title="上海" />
          <van-cell title="广州" />
          <van-cell title="深圳" />
          <van-cell title="北京" />
        </div>
        <van-index-anchor
          index="2"
          v-for="(item1, index) in wordList"
          :key="index"
          >{{ item1 }}
          <!-- 城市 -->
          <van-cell
            v-show="item.short[0].toUpperCase() === item1"
            :title="item.label"
            v-for="item in cityList"
            :key="item.label"
          />
        </van-index-anchor>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HouseCitylist",
  data() {
    return {
      cityList: [],
      wordList: [],
    };
  },

  mounted() {
    this.getCitylist();
  },

  methods: {
    async getCitylist() {
      const res = await axios({
        url: "http://liufusong.top:8080/area/city",
        params: {
          level: 1,
        },
      });
      this.cityList = res.data.body;
      console.log(this.cityList);
      res.data.body.forEach((ele) => {
        // 取第一个字母
        this.wordList.push(ele.short[0].toUpperCase());
      });
      this.wordList = new Set(this.wordList.sort());
    },
  },
};
</script>

<style lang="less" scoped>
// 顶部
.top {
  display: flex;
  height: 45px;
  background-color: #21b97a;
  color: #fff;

  span {
    line-height: 40px;
    font-size: 16px;
    padding-left: 15px;
  }
  h3 {
    line-height: 9px;
    margin: auto;
    font-weight: 400;
    font-size: 16px;
  }
}
.list {
  .currentcity {
    font-size: 14px;
    // padding-left: 10px;
  }
}

</style>
